<template>
        <div class="breadcumb">
          <ul>
            <li v-for="(v,i) in lists" :key="i">
              <router-link :to="{path:v.path}">{{v.meta.title}}</router-link>
              <span v-if="i<lists.length -1">/</span>
            </li>
    </ul>
      </div>

</template>

<script>
export default {
  name: 'breadcumb',
  data() {
    return {
      lists:[]
    }
  },
  mounted() {
    // console.log(this.$route.matched);
    // this.lists = this.$route.matched
  },
  // 监听路由变化
  watch: {
    $route(to,from){
      console.log(to);
      let matched = to.matched; // this.$route.matched
      if(matched.length && matched[0].name !== 'home'){
        matched = [{path:'/home',name:'home',meta:{title:"首页"}},...matched];
      }
      this.lists = matched;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.breadcumb{
  line-height: 40px;
  height: 40px;
}
.breadcumb ul li{
  display: inline-block;
}
.breadcumb ul li span{
  padding: 0 10px;
}
</style>
